<style scoped xmlns:v-el="http://www.w3.org/1999/xhtml">
    @import "../styles/swiper.min.css";

    /* index */

    .m-goods-list-content{
        -webkit-transition: all .5s linear;
        transition: all .5s linear;
    }

    #page-home{
        width:100%;
        height:100%;
        overflow-x:hidden;
    }


    #page-home .slide-body{

        height:auto;

    }



    #page-home .w-loading, #page-home .w-more {
        text-align: center;
        line-height: .5rem;
        font-size: .15rem;
        font-weight: bold;
        color: #999;
        background: #ffffff;
    }

    .page-hide{
        display: none;
    }

    #page-home .g-footer {
        border-top: 0
    }
    #page-home .m-index-mod {
        background-color: #fff;
        border-top: 1px solid #e6e6e6;
        /*border-bottom: 1px solid #e6e6e6;*/
        position: relative;
    }
    #page-home .m-index-mod-hd {
        position: relative;
        margin: 0 0.10rem;
        height: 0.33rem;

        line-height: 0.33rem;

        text-indent:0.08rem;
        border-bottom:1px solid #e6e6e6;
    }

    #page-home .m-index-mod-hd h3{
        font-weight:600;
    }

    #page-home .m-index-mod-hd:before{
        content:'';
        position: absolute;
        width: 0.03rem;
        height:0.12rem;
        background: #ef4b5f;
        left:0;
        top:0.10rem;
    }

    #page-home .m-index-mod-more {
        position: absolute;
        right: 0;
        bottom: 0;
        color: #cacaca;
        font-size: 0.12rem
    }
    #page-home .m-index-mod-bd {
        overflow: hidden
    }
    #page-home .m-index-promot {
        margin-bottom: 0.10rem;
        overflow: hidden;
        border-bottom: 1px solid #e6e6e6;
        position: relative;
    }
    #page-home .m-index-promot .banner-spacing {
        width: 100%;
        vertical-align: top;
    }
    #page-home .m-index-promot .w-slide-wrap-list {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: hidden
    }
    #page-home .m-index-promot .w-slide-wrap-list-item {
        width: 100%;
        height: 1.40rem

    }
    .swiper-pagination-bullet-active{
        background-color: #db3652;
    }

    #page-home .frame {
        display: block;
        width: 100%;
        height: 100%;
        overflow: hidden;
        text-align: center;
    }
    #page-home .frame img {
        margin: 0 auto;
        width:100%;
        height: 100%;
        object-fit:cover;
    }
    #page-home .m-index-reveal {
        margin-bottom: 0.10rem;
        height: auto
    }
    #page-home .m-index-newArrivals {
        height: auto;
        background:#fff;
    }

    #page-home .bacf7f7f7{
        background:#f7f7f7;
    }

    #page-home .m-index-popular {
        background: none;
        border: 0
    }
    #page-home .m-index-popular-list {
        /*padding: 0 0.02rem*/
    }
    #page-home .m-index-popular-list li:nth-of-type(n) {
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        border-right: 1px solid #dcdcdc;
    }
    #page-home .m-index-popular .w-more {
        margin: 0.05rem 0.04rem 0;
        line-height: 0.30rem;
        background: #fff
    }
    #page-home .m-index-popular .w-more a {
        display: block;
        height: 100%
    }
    #page-home .w-goods-ing {
        position: relative
    }
    #page-home .w-goods-ing .w-goods-title {
        margin-bottom: 0.09rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    #page-home .w-goods-ing .w-progressBar {
        margin-right: 0.50rem
    }
    #page-home .w-goods-ing .w-progressBar .txt {
        margin-bottom: 0.03rem;
        font-size: 0.12rem;
        color: #999999
    }

    #page-home .w-goods-ing .w-progressBar .wrap {
        margin-bottom: 0.12rem
    }
    #page-home .w-goods-ing .w-goods-pic > a {
        display: block;
        height: 100%;
        width: 100%;
    }
    #page-home .w-goods-ing .w-goods-pic > a > img {
        height: 100%;
        width: 100%;
        object-fit: contain;
    }
    #page-home .w-goods-ing .w-goods-shortFunc {
        position: absolute;
        right: 0.05rem;
        bottom: 0.16rem
    }


    .m-nav-list ,.m-lead-list,.m-goods-list{
        width: calc(100% - 0.20rem);
        padding:0 0.10rem;
        display: box;
        display: -webkit-box;
        display: -moz-box;
    }

    .m-nav-list li ,.m-goods-list li{
        position: relative;
        text-align: center;
        box-flex: 1;
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        width: 1px;
    }


    .m-nav-list  a i{
        display: inline-block;
        font-size:0.24rem;
        line-height: 0.24rem;
        margin-top: 0.04rem;
        text-align: center;
        padding: 0;


    }



    .m-goods-list a{
        display: inline-block;
        margin: 0 auto;
        width: 100%;
        text-align: center;
        color: #666666;
        line-height:0.40rem;

    }

    .m-goods-list a span{
        display: inline-block;
        padding:0 0.05rem;
        text-align: center;
        height:0.40rem;
        font-size: 0.14rem;
        line-height:0.40rem;
        -webkit-transition: border .5s linear;
        transition: border .5s linear;

    }

    .m-goods-bs span{
        border-bottom:0.02rem solid #ef4b5f;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;

    }



    .m-lead-list a img{
        display: inline-block;
        width:0.35rem;
        height:0.35rem;
    }



    .m-nav-list a{
        display: -webkit-flex;
        width:100%;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #7a7e83;
    }

    .m-lead-list a{
        display: inline-block;
        margin: 0 auto;
        width: 100%;
        text-align: center;
        color: #7a7e83;

    }

    .m-lead-list i{
        display: inline-block;
        margin: 0 auto;
        width: 100%;
        text-align: center;
        color: #7a7e83;
    }

    .m-lead-list i img{
        display: inline-block;
        width:0.35rem;
        height:0.35rem;
    }

    .m-lead-list i span{
        display: inline-block;
        width: 100%;
        text-align: center;
        font-size: 0.13rem;
    }

    .m-nav-list a span ,.m-lead-list a span{
        display: inline-block;
        width: 100%;
        text-align: center;
        font-size: 0.13rem;
    }
    .m-nav-list .selected span {
        color: #ef3737;

    }

    .m-nav-list .selected i{
        color: #ef3737;
    }




    #page-home{
        font-size:.24rem;
    }
    #page-home .swiper-container{

    }

    #page-home .w-slide-wrap-list-item-home{
        width: 100%;
        overflow: hidden;

    }

    #page-home .w-goodsList-s .w-goods{
        margin: 0 0;
        padding: .1rem 0;
        border-bottom: 1px solid #dcdcdc;
    }

    #page-home .w-goods-ing .w-goods-pic{
        position: relative;
        margin: 0 auto .1rem;
        width: 1.2rem;
        height: 1.2rem;
        background-position: center center;

        background-size:contain;
    }




    #page-home .m-goods-nav {

        background-color: #ffffff;
        border-top: 1px solid #cccccc;
        -webkit-box-shadow: 0 1px .03rem 0px rgba(160, 160, 160, 0.2);
        -moz-box-shadow: 0 1px .03rem 0px rgba(160, 160, 160, 0.2);
        box-shadow: 0 1px .03rem 0px rgba(160, 160, 160, 0.2);
        box-sizing: content-box;
        font-size:.15rem;
    }

    #page-home .g-footer {
        border-top: 0
    }
    #page-home .m-index-mod {
        background-color: #fff;
        border-top: 1px solid #e6e6e6;
        /*border-bottom: 1px solid #e6e6e6;*/
        position: relative;
    }
    #page-home .m-index-mod-hd {
        position: relative;
        margin: 0 .1rem;
        height: .33rem;

        line-height: .33rem;

        text-indent:.08rem;
        border-bottom:1px solid #e6e6e6;
    }

    #page-home .m-index-mod-hd h3{
        font-weight:600;
    }

    #page-home .m-index-mod-hd:before{
        content:'';
        position: absolute;
        width:.03rem;
        height:.12rem;
        background: #ef4b5f;
        left:0;
        top:.1rem;
    }

    #page-home .m-index-mod-more {
        position: absolute;
        right: 0;
        bottom: 0;
        color: #cacaca;
        font-size: .24rem
    }
    #page-home .m-index-mod-bd {
        overflow: hidden
    }
    #page-home .m-index-promot {
        margin-bottom: .1rem;
        overflow: hidden;
        border-bottom: 1px solid #e6e6e6;
        position: relative;
    }
    #page-home .m-index-promot .banner-spacing {
        width: 100%;
        vertical-align: top;
    }
    #page-home .m-index-promot .w-slide-wrap-list {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: hidden
    }
    #page-home .m-index-promot .w-slide-wrap-list-item {
        width: 100%;
        height: 1.4rem

    }

    .swiper-pagination-bullet-active{
        background-color: #db3652;
    }

    #page-home .frame {
        display: block;
        width: 100%;
        height: 100%;
        overflow: hidden;
        text-align: center;
    }
    #page-home .frame img {
        margin: 0 auto;
        width:100%;
        height: 100%;
        object-fit:cover;
    }
    #page-home .m-index-reveal {
        margin-bottom: .1rem;
        height: auto
    }
    #page-home .m-index-newArrivals {
        height: auto;
        background:#fff;
    }

    #page-home .bacf7f7f7{
        background:#f7f7f7;
    }

    #page-home .m-index-popular {
        background: none;
        border: 0
    }
    #page-home .m-index-popular-list {
        /*padding: 0 .02rem*/
    }
    #page-home .m-index-popular-list li:nth-of-type(n+1) {
        border-right: 1px solid #dcdcdc;
    }
    #page-home .m-index-popular .w-more {
        margin: .05rem .04rem 0;
        line-height: .3rem;
        background: #fff
    }
    #page-home .m-index-popular .w-more a {
        display: block;
        height: 100%
    }
    #page-home .w-goods-ing {
        position: relative
    }
    #page-home .w-goods-ing .w-goods-title {
        margin-bottom: .09rem;
        font-size:.16rem;
        font-weight:bold;
    }

    #page-home .w-goods-title a{
        padding-left:.1rem;
    }

    #page-home .w-goods-ing .w-progressBar {
        margin-right: .85rem;
        margin-left:.1rem
    }


    #page-home .w-goods-ing .w-goods-shortFunc .w-button-addToCart {
        text-align: center;
        width: 0.69rem;
        height: 0.25rem;
        line-height: 0.25rem;
        color: #ef3737;
        font-size:0.12rem;
    }

    #page-home .w-goods-ing .w-progressBar .txt {
        margin-bottom: .03rem;
        font-size: .13rem;
        line-height:.3rem;
    }
    #page-home .w-goods-ing .w-progressBar .txt strong {
        font-weight:bold;

    }
    #page-home .w-goods-ing .w-progressBar .wrap {
        margin-bottom: .12rem
    }
    #page-home .w-goods-ing .w-goods-shortFunc {
        position: absolute;
        bottom: 0.2rem;
        right: 0.08rem;
        width: 0.69rem;
        height: 0.25rem;
        color: #ef3737;
        border: 1px solid currentColor;
        border-radius: 0.06rem;
    }

    #page-home .m-lead{
        font-size:.13rem;
        height: .9rem;
        background-color: #ffffff;
        display: -webkit-flex;
        -webkit-flex-direction: column;
        justify-content: center;
        border-bottom:1px solid rgb(222,222,222);
    }

    #page-home .m-lead-list{
        width: calc(100% - .2rem);
        padding:0 .1rem;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    #page-home .m-lead-list li {
        flex: 1;
    }

    #page-home .m-lead-list a img {
        display: inline-block;
        width: .35rem;
        height: .35rem;
    }



    #page-home .m-lead-list a{
        display: inline-block;
        margin: 0 auto;
        width: 100%;
        text-align: center;
        color: #7a7e83;
    }


    .lottery_container{
        width: 100%;
        height: .4rem;
        overflow: hidden;

    }

    .lottery {
        width: 100%;
        height: .4rem;
        position: relative;
        background: #ffffff;
    }

    .lottery .lottery-con {
        height: .4rem;
        width: 100%;

        position: relative;
        overflow: hidden;
        border-bottom:1px solid #e3e3e3;
    }
    .lottery .lottery-con::before {
        content: '';
        display: block;
        width: 100%;
        height: .4rem;
    }
    .lottery .lottery-con span {
        display: block;
        height: .1rem;
        width: .1rem;
        border-radius: .5rem;
        background: #ffffff;
        position: absolute;
        bottom: -.06rem;  /**0.1+0.03**/
    }
    .lottery .broadcast-icon {
        width: .18rem;
        height: .16rem;
        background: url("../images/broadcast-red.jpg");
        background-size: cover;
        position: absolute;
        left: .1rem;
        top: .13rem;
    }
    .lottery ul {
        width: 100%;
        height: .15rem;
        position: absolute;

        top: .14rem;
        left: .33rem;
        overflow: hidden;
        font-size:.14rem;
    }
    .lottery ul li {
        width: calc(100% - .5rem);
        height: .15rem;
        line-height: .15rem;
        list-style: none;
        font-size: 12px;
        color: #090909;
        letter-spacing: 1px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #page-home .moreContainer{
        background: #ededed;
        padding:.1rem 0;
    }

    #page-home .w-loading, #page-home .w-more {
        text-align: center;
        line-height: .5rem;
        font-size: .15rem;
        font-weight:bold;
        color: #999;
        background: #ffffff;
    }
    #page-home  .w-more a {
        color: #5d5d5d;
    }

    #page-home .sort2Arrow3, #page-home .up .sort2Arrow3 {
        transform: rotateZ(-90deg);
        -webkit-transform: rotateZ(-90deg);
    }
    #page-home .down .sort2Arrow3 {
        transform: rotateZ(90deg);
        -webkit-transform: rotateZ(90deg);
    }

    #page-home .sort2Arrow3 {
        font-size: 0.15rem;
        font-family: "ifont" !important;
        display: inline-block;
        margin: 0;

        transition: all .3s;
        -webkit-transition: all .3s;
        position: absolute;
    }


    #page-home .m-goods-list a span {
        position: relative;
        display: inline-block;
        padding: 0 5px;
        text-align: center;
        height: .4rem;
        line-height: .4rem;
        -webkit-transition: border .5s linear;
        -moz-transition: border .5s linear;
        -ms-transition: border .5s linear;
        -o-transition: border .5s linear;
        transition: border .5s linear;

    }
</style>
<template>
        <div class="swiper-container" id="page-home" style="margin: 0;">
            <div class="swiper-wrapper">

                <div  class="swiper-slide slide-body">
                    <div class="g-body">
                        <div class="m-index">
                            <div class="g-body-hd">
                                <div class=" swiper-container " id="home-slide">
                                    <ul class="swiper-wrapper" >
                                        <li class="swiper-slide w-slide-wrap-list-item" v-for="(k,i) in data.banner.item">
                                            <a class="frame" @click="bannerTo(i.url,i.id)" data-href="?c=detail&amp;id={{i.id}}" >
                                                <img :src="i.imgUrl" >
                                            </a>
                                        </li>
                                    </ul>
                                    <div class="swiper-pagination"></div>
                                </div>
                            </div>

                            <div class="g-wrap g-body-bd">
                                <div class="m-lead">
                                    <ul class="m-lead-list">
                                        <li>
                                            <a href="javascript:;" data-href="?c=mall" v-link="{path:'/mall'}"  @click="cnzz('3')">
                                                <img src="../images/jifen_icon.png" />
                                                <span>积分商城</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a class="user_Sign"  @click.prevent="cnzz('1')" @click="sign" v-el:sign>
                                                <img src="../images/qiandao_icon.png" />
                                                <span v-html="is_qiandao==1?'已签到':'每日签到'"></span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="javascript:;" data-href="?c=latest" v-link="{path:'/latest'}" @click="cnzz('2')">
                                                <img src="../images/zuixin_icon.png" />
                                                <span>最新揭晓</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="javascript:;" data-href="?c=grouplists" v-link="{path:'/groupLists'}" @click="cnzz('4')">
                                                <img src="../images/pingtuan_icon.png" />
                                                <span>拼团</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>

                                <div class="lottery_container background_9" >
                                    <div class="lottery">

                                        <div class="broadcast-icon"></div>
                                        <div class="swiper-container" style="height:.4rem" id="broadCastSlide">
                                            <ul  class="swiper-wrapper" style="height:auto">
                                                <li  class="swiper-slide color_7 nowrap" v-for="item in winnerList" track-by="$index">恭喜 <a class="color_1" data-href="./?c=profile&amp;id={{user_id}}" v-link="{name:'profile',query:{id:item.user_id}}">{{item.username}}</a> 获得 <a class="color_5" data-href="./?c=detail&amp;id={{goods_id}}" v-link="{path:'/detail',query:{id:item.goods_id}}">{{item.title}}</a> </li>
                                            </ul>
                                        </div>

                                    </div>
                                </div>


                                <div class="m-goods-nav">

                                    <ul class="m-goods-list">
                                        <li><a href="javascript:;" @click="lable=''" :class="{'m-goods-bs':lable==''}"  @click.prevent="cnzz('人气')"><span>人气</span></a></li>
                                        <li><a href="javascript:;"  @click="lable='new'" :class="{'m-goods-bs':lable=='new'}"  @click.prevent="cnzz('最新')"><span>最新</span></a></li>
                                        <li><a href="javascript:;" @click="lable='rate'" :class="{'m-goods-bs':lable=='rate'}"  @click.prevent="cnzz('进度')"><span>进度</span></a></li>
                                        <!--<li><a href="javascript:;" @click="lable='act'" :class="{'m-goods-bs':lable=='act'}"  @click.prevent="cnzz('活动')"><span>活动专区</span></a></li>-->
                                        <li><a href="javascript:;"  @click="lable=='need_desc'?lable='need_asc':lable='need_desc'" :class="[lable=='need_desc'|lable=='need_asc'?'m-goods-bs':'',lable=='need_desc'?'down':'up']"  @click.prevent="cnzz('总需人气')"><span>总需人次<i :class="['ifont','sort2Arrow3']">&#xe66b;</i></span></a></li>
                                    </ul>
                                </div>
                                <div class=" m-index-mod m-index-newArrivals m-goods-list-content page-show overflow-y" >
                                    <div class="m-index-mod-bd" >

                                        <ul class="w-goodsList w-goodsList-s m-index-popular-list" id="home-popular" v-if="list.length>0">

                                            <li class="w-goodsList-item animated" v-for="(key,item) in list" v-show="goodsShow"  :data-ten="item.isTen" :data-gi="item.shopid" :data-title="item.shopTitle" >
                                                <div :class="['w-goods','w-goods-ing',!!item.isTen?'isTen':'']" >
                                                    <a class="w-goods-pic" v-link="{path:'/detail',query:{id:item.shopid}}" :data-img="item.shopid">
                                                        <img :src="item.thumb" style="height: 100%;object-fit: contain"/> </a>
                                                    <div class="w-goods-info">
                                                        <p class="w-goods-title f-txtabb"><a href="javascript:;" class="color_5" data-href="./?c=detail&amp;id={{shopid}}" v-link="{path:'/detail',query:{id:item.shopid}}">{{item.shopTitle}}</a></p>
                                                        <div class="w-progressBar">
                                                            <p class="txt color_8">开奖进度<strong class="color_1">{{(item.currentNum/item.totalNum)*100 | toInt}}%</strong></p>
                                                            <p class="wrap">
                                                                <span class="bar" :style="{width:(item.currentNum/item.totalNum)*100  + '%' }"><i class="color"></i></span>
                                                            </p>
                                                        </div>
                                                    </div>

                                                    <div class="w-goods-shortFunc">
                                                        <button class="w-button-addToCart" :id="'good-'+item.shopid" href="javascript:;" data-addcart="{{item.shopid}}" @click="addCart">
                                                            立即抢购
                                                        </button>
                                                    </div>


                                                </div>
                                            </li>
                                        </ul>
                                        <template v-else>
                                            <p style="width: 100%; line-height: 0.8rem; text-align: center; font-size: 0.14rem;color: #666666">暂无活动商品</p>
                                        </template>
                                        <div class="moreContainer">
                                            <div class="w-more"  id="popular_more" v-el:getmore>
                                                <a  href="javascript:;" v-show="hasMore">
                                                    <template v-if="!loading">
                                                        上划加载更多
                                                    </template>
                                                    <template v-else>
                                                        加载中
                                                    </template>
                                                </a>

                                                <a  href="javascript:;" v-show="!hasMore"  v-link="{path:'/list'}">点击查看更多商品</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <footer-component></footer-component>

                    <!--<a class="w-miniCart"   href="javascript:;"><span class="w-miniCart-text">清单</span><i class="ico ico-miniCart"></i><b class="w-miniCart-count" style="display:none">0</b></a>-->
                </div>
            </div>
        </div>
        <button @click="toTop" class="w-button w-button-round w-button-backToTop" style="">返回顶部</button>
        <nav-component keep-alive ></nav-component>
        <pop :status-pop="statusPop" :status-toast="statusToast" :msg="msg" :delay="delay">
            <a href="javascript:;" @click="statusPop=false">确定</a>
        </pop>

</template>

<script>
    import headerComponent from '../components/header'
    import navComponent from '../components/nav'
    import footerComponent from '../components/footer'
    import pop from '../components/pop'
    import Swiper from '../libs/swiper.min'
    import User from '../module/user'
    import Cart from '../module/cart'
//    import Config from '../config/config'
    import Request from '../config/request'
    import {toInt} from '../filters/filter'
    import { Circ } from '../libs/tween'
    export default{
        watch:{
           async lable(value){

               this.page=1;

               this.hasMore = true;

               let res;

                if (value != 'act') {

                    res = await this.getGoodsList();

                } else {

                    res = await this.getGoodsListByAct();

                }

               this.list.splice(0,this.list.length);

               this.list.push(...res.data);

                this.$nextTick(function(){

                    this.pageSw.update({updateTranslate:true});

                })
           }
        },

        filters:{
            toInt
        },
        data(){
            return{
                data:{}, //index/all请求的所有数据
                list:[], //当前显示的数据
                winnerList:[], //滚动播报数据
                lable:'',
                pw:null,
                bw:null,
                page:1,
                hasMore:true,
                loading:false,
                tipNum:0,
                statusPop:false,
                statusToast:false,
                delay:2000,
                msg:'',  //弹窗文案
                goodsShow:false,
                is_qiandao:0,
                t:0, //当前动画执行时间
                pageSw:null
            }
        },
        methods: {
            bannerTo(url,id) {
                if( url==false && id!='' ){
                    this.$router.go({path: 'detail', query:{id: id}});
                }
                else {
                    window.location.href = url
                }
            },
            addCart(e){
                Cart.addCart($(e.target));

            },

            async getGoodsList(){

                    let item=await Request.post(Config.apiDomain + '/index/getHomeFromPage?token='+User.token,{data:{page:this.page,type:this.lable}});

                    return item;

            },

            async getGoodsListByAct(){

                    let item = await Request.get(Config.apiDomain + '/index/getActGoods')

                    return item;

            },

            async getData(){


                let item=await this.getGoodsList();

                let res=await Request.get(Config.apiDomain + '/index/all?token='+User.token);

                if(res.status==200) this.data=Object.assign({},this.data,res.data)

                this.list.push(...item.data);

                this.winnerList.push(...this.data.winMsg.item);

                this.is_qiandao = this.data.is_qiandao;

                this.goodsShow = true;

                if(!!User.token&&!sessionStorage.getItem('tipNum')){

                    let couponData = await Request.post(Config.apiDomain+'/index/showMsg',{data:{token:User.token}});

                    if(couponData.status == 200 && couponData.data.isAlert == 1 && couponData.data.isNewUser == 1 && couponData.data.alertType == 1){

                        this.statusPop = true;

                        this.msg='弹个窗'

                        sessionStorage.setItem('tipNum',1);

                    }else if(couponData.status == 200 && couponData.data.isAlert == 1 && couponData.data.isNewUser == 0 && couponData.data.alertType == 2){

                        this.statusPop=true;

                        this.msg='弹个窗'

                        sessionStorage.setItem('tipNum',1);

                    }else{

                    }
                }
            },
            async loadMore(){


                if(this.loading) return false;

                this.loading = true;

                this.page++;

                let res;
                if (this.lable != 'act') {

                    res = await this.getGoodsList();

                } else {

                    res = await this.getGoodsListByAct()

                }


                if(res.status==200){

                    let len=0;

                    if(res.data){

                        len += res.data.length;

                        this.list.push(...res.data);

                    } else {

                        this.hasMore = false;

                    }


                    if(len < 6){

                        this.hasMore = false;

                    }



                    this.loading=false;

                    this.$nextTick(function(){

                        this.pageSw.update({updateTranslate:true});

                    })



                }
            },
            async getMore(e){


                let pos=this.$els.getmore.getBoundingClientRect();

                if (this.hasMore &&
                        ((pos.top-120 > 0 && window.innerHeight - pos.top-120 > 0) ||
                        (pos.top-120 <= 0 && pos.bottom >= 0))) {
                    await this.loadMore();
                }

            },

            toTop(){

//                this.step();
                this.pageSw.setWrapperTranslate(0);



            },

            step(){

                let [t,b,c,d]=[600/1000,this.pageSw.translate,-this.pageSw.translate,2];

                let x=Circ.easeIn(t,b,c,d);

                this.pageSw.setWrapperTranslate(x);


                if(x<=0){

                   return ;
                }
                requestAnimationFrame(this.step)
            },
            async sign(){
                if(User.isLogin){

                    if(this.is_qiandao==1){

                        this.statusToast=true;

                        this.msg='已签到';

                        return false;
                    }

                    let res=await Request.get(Config.apiDomain+"/Invita/user_sign?token="+User.token)

                    if(res.status==200){

                        this.$els.sign.children[1].innerText='已签到';

                        this.statusToast=true;

                        this.msg='签到成功';

                        this.is_qiandao=1;

                    }

                }else{

                    this.msg='您还未登录，请先登录';

                    this.statusPop=true;

                }
            }
        },
        created(){

            this.$dispatch('isLoading',true);

        },
        async ready(){

            await this.getData();

            this.$nextTick(()=>{

                this.pw = new Swiper('#home-slide',{

                    pagination: '.swiper-pagination',
                    autoplay: 2000,
                    paginationClickable: '.swiper-pagination',
                    nextButton: '.swiper-button-next',
                    prevButton: '.swiper-button-prev',
                    preloadImages: true,
                    observe:true,
                    spaceBetween: 0,
                    loop:true,
                    parallax : true

                });
                this.bw=new Swiper('#broadCastSlide',{

                    autoplay: 2000,
                    observe:true,
                    spaceBetween: 0,
                    loop:true,
                    direction:'vertical'

                });

                let _this = this
                this.pageSw = new Swiper('#page-home',{

                    parallax : true,
                    observe:true,
                    spaceBetween: 0,
                    direction:'vertical',
                    freeMode:true,
                    slidesPerView:'auto',

                    onTouchEnd:function(swiper){

                        if(swiper.translate<-swiper.slides[0].scrollHeight+window.innerHeight+100&&_this.hasMore){

                            _this.loadMore();

                        }

                    }

                })

                this.$dispatch('isLoading',false)

            })

        },
        destroyed(){

            this.pw.destroy(true,true);

            this.bw.destroy(true,true);

            this.pageSw.destroy(true,true)

        },
        components:{

            headerComponent,
            navComponent,
            footerComponent,
            pop
        },
        transitions:{
            'faded':{
                enterClass:'fadeInUp',

                leaveClass:'zoomOut'
            }
        }
    }
</script>
